<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>僵尸移动</title>
    <style>
        #box{
            /*width: 300px;*/
            /*height: 250px;*/
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box" style="left: 600px; top: 300px;">
    <img src="z1.gif">
</div>
    <input type="button" value="==上==" onclick="run1()">
    <input type="button" value="==下==" onclick="run2()">
    <input type="button" value="==左==" onclick="run3()">
    <input type="button" value="==右==" onclick="run4()">
</body>
<script>
    var box=document.getElementById('box');
    var xSpeed=2; //x轴的速度
    var ySpeed=2; //y轴的速度
    var timer;

    // top
    function run1(){
        clearInterval(timer);
        timer=setInterval(function(){
            ySpeed=-2;
            xSpeed=0;
            var y=parseInt(box.style.top)+ySpeed;
            box.style.top=y+'px';
            if(y<=0){
                clearInterval(timer);
            }
        },15)
    }

    // bottom
    function run2(){
        clearInterval(timer);
        timer=setInterval(function(){
            ySpeed=2;
            xSpeed=0;
            var y=parseInt(box.style.top)+ySpeed;
            box.style.top=y+'px';
            if(y>=450){
                clearInterval(timer);
            }
        },15)
    }

    // left
    function run3(){
        clearInterval(timer);
        timer=setInterval(function(){
            xSpeed=-2;
            ySpeed=0;
            var x=parseInt(box.style.left)+xSpeed;
            box.style.left=x+'px';
            if(x<=0){
                clearInterval(timer);
            }
        },15)
    }

    //right
    function run4(){
        clearInterval(timer);
        timer=setInterval(function(){
            xSpeed=2;
            ySpeed=0;
            var x=parseInt(box.style.left)+xSpeed;
            box.style.left=x+'px';
            if(x>=1000){
                clearInterval(timer);
            }
        },15)
    }
</script>
</html>